<template>
  <div class="base-module-comp" :style="styles">
    <template v-if="visible">
      <slot v-if="$slots.header" name="header"></slot>
      <div v-else :class="['base-module-title', direction]">
        <span  v-if="direction === 'left'" class="title-text">
        <slot v-if="$slots.title" name="title"></slot>
        <template v-else>{{ title }}</template>
      </span>
        <slot v-if="$slots.icon" name="icon"></slot>
        <span
          v-else
          :class="['icon-container', direction]"
          @click="handleClick">
        <i class="el-icon-plus"></i>
      </span>
        <span  v-if="direction === 'right'" class="title-text">
        <slot v-if="$slots.title" name="title"></slot>
        <template v-else>{{ title }}</template>
      </span>
      </div>
      <div class="base-module-container">
        <slot
          :visible="visible"
          v-bind="$attrs"
          v-on="$listeners">
        </slot>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'baseModule',
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    styles: {
      type: Object,
      default: () => ({})
    },
    direction: {
      type: String,
      default: 'left'
    }
  },
  methods: {
    /**
     * 模块icon点击事件
     */
    handleClick() {
      this.$emit('icon-click');
    }
  }
};
</script>

<style scoped lang="scss">
.base-module-comp {
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  .base-module-title {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    &.left {
      padding: 0 20px 0 15px;
      background: url("../../assets/images/title.png") no-repeat;
      background-size: 100%;
    }
    &.right {
      padding: 0 15px 0 20px;
      background: url("../../assets/images/title_r.png") no-repeat;
      background-size: 100%;
    }
    .title-text {
      position: relative;
    }
    .icon-container {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px 5px;
      background-color: rgba(255,255,255,0.4);
      border-radius: 3px;
      i {
        cursor: pointer;
        font-size: 12px;
      }
      &.left {
        transform: skewX(15deg);
        .el-icon-plus {
          transform: skewX(-15deg);
        }
      }
      &.right {
        transform: skewX(-15deg);
        .el-icon-plus {
          transform: skewX(15deg);
        }
      }
    }
  }
  .base-module-container {
    width: 100%;
    height: calc(100% - 25px);
    overflow: hidden;
  }
}
</style>
